<script setup>
import { userLogin } from '@/api/LoginView'
import { userReguserInfo } from '@/api/ReguserView'
import { setCookie } from '@/utils/Storage'
import { ref } from 'vue'
import router from '@/router/beforeEach'
import store from '@/store'
import '@/assets/formstyle.css'
// import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue'
import { Vue_App_Token } from '@/utils/config'
import { message } from 'ant-design-vue'
const [messageApi, contextHolder] = message.useMessage()
const isRegister = ref(true) // 登录注册切换
const loginForm = ref({
  phone_number: '',
  password: '',
})

const reguserloginForm = ref({
  username: '',
  password: '',
  passwordcopy: '',
  schoolID: '',
  phone_number: '',
  specialized_class: '',
  qqsmtp: '',

})

const setLoginFromdata = () => {
  if (!loginForm.value.phone_number.trim() || !loginForm.value.password.trim()) {
    messageApi.error('请输入手机号和密码')
    return
  }
  if (!/^((\+86)|(86))?(1[3-9][0-9]{9})$/.test(loginForm.value.phone_number)) {
    messageApi.error('手机号格式错误，请输入正确的手机号')
    return
  }

  if (loginForm.value.password.length < 6) {
    messageApi.error('密码长度不少于6位! ')
    return
  }
  userLogin(loginForm.value)
    .then((res) => {
      console.log(res)
      if (res.status == 1) {
        messageApi.error('登录失败！用户名或密码错误！')
      } else {
        setCookie(Vue_App_Token, res.token)
        message.success('登录成功！')
        store.commit('SetRegusterStatus', true)

        router.push('/')
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

const setRegisterFromdata = () => {
  if (
    !reguserloginForm.value.username.trim() ||
    !reguserloginForm.value.password.trim() ||
    !reguserloginForm.value.schoolID.trim() ||
    !reguserloginForm.value.phone_number.trim() ||
    !reguserloginForm.value.specialized_class.trim() ||
    !reguserloginForm.value.passwordcopy.trim()
  ) {
    messageApi.error('请完善所有信息')
    return
  }

  if (reguserloginForm.value.password !== reguserloginForm.value.passwordcopy) {
    messageApi.error('两次密码输入不一致')
    return
  }

  if (reguserloginForm.value.passwordcopy.length < 6) {
    messageApi.error('密码长度错误')
    return
  }

  if (!/^\d{8}$/.test(reguserloginForm.value.schoolID.trim())) {
    messageApi.error('学号必须是8位数字')
    return
  }

  if (!/^((\+86)|(86))?(1[3-9][0-9]{9})$/.test(reguserloginForm.value.phone_number.trim())) {
    messageApi.error('手机号格式错误，请输入正确的手机号')
    return
  }

  userReguserInfo(reguserloginForm.value)
    .then((res) => {
      console.log(res)
      if (res.status == 1) {
        messageApi.error('注册失败！用户已存在')
      } else {
        message.success('注册成功！')
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

</script>

<template>
  <div class="about">
    <!-- <img class="background-image" src="../assets/tree.png" alt="background" /> -->
    <div class="yetou">
      <div class="loader">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>

      </div>
      <p>--- WELCOME TO 3G ---</p>
    </div>
    <context-holder />
    <div class="theform">
      <div class="form-content">
        <div v-if="isRegister" class="loginform">
          <div class="formtit formtitlogin">
            <div class="text">.LOGIN.</div>
            <div class="text">.LOGIN.</div>
          </div>
          <!-- <h1>登录</h1> -->
          <div>
            <p class="userInput">
              <span>手机号：</span><input type="text" v-model="loginForm.phone_number" />
            </p>
            <p class="userInput">
              <span>密 码：</span><input type="password" v-model="loginForm.password" />
              <!-- <EyeOutlined />
                <EyeInvisibleOutlined /> -->
            </p>
          </div>
          <button @click="setLoginFromdata">登录</button>
          <!-- <span class="isRegister" @click="isRegister = flase">注册 →</span> -->
        </div>
        <div v-else class="register">
          <div class="formtit formtitregister">
            <div class="text">.REGISTER.</div>
            <div class="text">.REGISTER.</div>
          </div>
          <div>
            <p class="userInput">
              <span>用户名：</span><input type="text" v-model="reguserloginForm.username" />
            </p>
            <p class="userInput">
              <span>密 码：</span><input type="password" v-model="reguserloginForm.password" />
            </p>
            <p class="userInput">
              <span style="font-size: .8rem;">确认密码：</span><input type="password"
                v-model="reguserloginForm.passwordcopy" />
            </p>
            <p class="userInput">
              <span>学 号：</span><input type="text" v-model="reguserloginForm.schoolID" />
            </p>
            <p class="userInput">
              <span>班 级：</span><input type="text" v-model="reguserloginForm.specialized_class" />
            </p>
            <p class="userInput">
              <span>手机号：</span><input type="text" v-model="reguserloginForm.phone_number" />
            </p>
            <p class="userInput">
              <span>QQ号：</span><input type="text" v-model="reguserloginForm.qqsmtp" />
            </p>
          </div>
          <button @click="setRegisterFromdata">注册</button>
          <span class="isRegister" @click="isRegister = true">← 返回</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
// .about {
//   width: 100%;
//   height: 100vh;
//   display: flex;
//   flex-direction: column;
//   /* 将主轴方向设置为垂直 */
//   justify-content: flex-start;
//   /* 将元素顶部对齐 */
//   align-items: center;
//   background-color: #165047;

// }
// .background-image {
//   width: 120%;
//   /* 图片宽度缩小50% */
//   height: auto;
//   /* 高度自适应 */
//   position: absolute;
//   top: 50%;
//   /* 垂直居中 */
//   left: 50%;
//   /* 水平居中 */
//   transform: translate(-50%, -50%) rotate(20deg);
//   /* 旋转30度并使其居中 */
//   background: url("../assets/tree.png") no-repeat;
//   background-size: contain;
//   /* 让图片完全显示并保持纵横比 */
// }
.about {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* 将主轴方向设置为垂直 */
  justify-content: flex-start;
  /* 将元素顶部对齐 */
  align-items: center;
  // background-color: #165047;
  background: url(../assets/tree.png) no-repeat;
  background-size: 100%;
  /* 将背景图片缩小 50% */
  background-position: center;
  // transform: rotate(30deg);
  /* 将背景图片在容器中居中 */
  background-color: #165047;
}

.theform {
  z-index: 6;
  display: flex;
  justify-content: center;
  /* 在水平方向上居中 */
  align-items: center;
  /* 在垂直方向上居中 */
  height: 70%;
  /* 充满父容器的高度 */
}

.isRegister {
  margin-left: 2rem;
  padding: 0.3rem;
  border: 2px dashed #506d89;
  transition: 0.5s;
  color: #1ebba6;
}

.isRegister:hover {
  cursor: pointer;
  border: 2px solid #1ebba6;
  color: #506d89;
}

.userInput {
  width: 90%;
  display: flex;

  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 1rem;

  span {
    width: 30%;
    text-align: right;
  }

  input {
    width: 70%;
  }
}

p span {
  color: rgb(233, 123, 12);
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 600;
}

.form-content {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中，如果需要 */
}

.formtitlogin {
  margin-left: 14%;
}

.formtitregister {
  margin-left: -4%;
}

.formtit {
  // margin-left: 3%;
  position: relative;
  padding-top: 1em;
  // font-weight: 800;
  font-size: 1.5em;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  letter-spacing: 0.5em;
  margin-bottom: 4rem;

  .text {
    color: #fff;
    font-size: 3rem;
    position: absolute;
  }

  .text:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 2px #4da99c;
  }

  .text:nth-child(2) {
    color: #f3b852;
    animation: animate 4s ease-in-out infinite;
  }

  @keyframes animate {

    0%,
    100% {
      clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }

    50% {
      clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
  }
}

// 页头-旋转四叶草
.yetou {
  z-index: 6;
  display: flex;
  align-items: center;
  margin-top: 3%;

  p {
    margin-right: 10px;
    font-weight: 500;
    color: #f9aa00;
  }

  .loader {
    width: 85px;
    height: 85px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    animation: loading-rotate 3s linear infinite;
  }

  .item {
    width: 40px;
    height: 40px;
    display: block;
    box-sizing: border-box;
  }

  .item:nth-of-type(1) {
    background-color: #3a696d;
    border-radius: 20px 20px 0 20px;
    border-left: #ffffffb3 4px solid;
    border-top: #f7f7f7c0 4px solid;
  }

  .item:nth-of-type(2) {
    background-color: #6ca769;
    border-radius: 20px 20px 20px 0;
    border-right: #ffffffaa 4px solid;
    border-top: #f7f7f7c3 4px solid;
  }

  .item:nth-of-type(3) {
    background-color: #b7e65e;
    border-radius: 20px 0 20px 20px;
    border-left: #ffffffac 4px solid;
    border-bottom: #f7f7f7be 4px solid;
  }

  .item:nth-of-type(4) {
    background-color: #89d092;
    border-radius: 0 20px 20px 20px;
    border-right: #ffffffb3 4px solid;
    border-bottom: #f7f7f7bf 4px solid;
  }

  @keyframes loading-rotate {
    0% {
      transform: scale(.5) rotate(0);
    }

    20% {
      transform: scale(.5) rotate(72deg);
    }

    40% {
      transform: scale(.5) rotate(144deg);
    }

    60% {
      transform: scale(.5) rotate(216deg);
    }

    80% {
      transform: scale(.5) rotate(288deg);
    }

    100% {
      transform: scale(.5) rotate(360deg);
    }
  }
}

/* 当视口宽度小于 600px 时应用的样式 */
@media screen and (max-width: 600px) {
  .userInput {
    width: 100%;
    display: flex;

    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1rem;

    span {
      width: 35%;
      text-align: right;
    }

    input {
      width: 70%;
    }
  }

  .formtit {
    .text {
      font-size: 1.5rem;
    }
  }

  .formtitlogin {
    margin-left: 21%;
  }

  .formtitregister {
    margin-left: 6%;
  }
}

/* 当视口宽度大于等于 600px 且小于等于 1200px 时应用的样式 */
@media screen and (min-width: 601px) and (max-width: 1200px) {
  .about {
    background-size: 30em;
  }

  .formtit {
    .text {
      font-size: 2rem;
    }
  }
}

/* 当视口宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1201px) {
  .about {
    background-size: 40em;
  }

  .userInput {
    width: 40rem;
    display: flex;

    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 2rem;

    span {
      width: 35%;
      text-align: right;
    }

    input {
      width: 90%;
    }
  }

  .formtit {
    margin-left: 34%;
    margin-bottom: 5rem;
  }

  .formtitregister {
    margin-left: 24%;
  }
}
</style>
